@tailwind utilities;

@layer utilities {
    .-skin {
        /* --skin-color: unset;            /* Default colors. */
        /* --skin-text: unset;             /* Text colors. */
        --skin-bg: var(--skin-color);      /* Background colors. */
        --skin-ring: var(--skin-color);    /* Ring colors. */
        --skin-border: var(--skin-color);

        --skin-hover-text: var(--skin-text);
        --skin-hover-bg: var(--skin-bg);

        --tw-ring-color: var(--skin-ring);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);

        --color-link-hover: var(--skin-text);

        background-color: var(--skin-bg);
        color: var(--skin-text);
        border-color: var(--skin-border);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    }

    .-skin:hover {
        background-color: var(--skin-hover-bg);
        color: var(--skin-hover-text);
    }
}

.skin {
    @apply -skin;
}
